ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳು: ಡಿಕ್ಲರೇಟಿವ್ ಲೋಡಿಂಗ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್‌ನ ಆಳವಾದ ಅವಲೋಕನ

ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತಿನಲ್ಲಿ, ಸುಗಮ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು (user experience) ಸೃಷ್ಟಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯ. ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುವ ಅತ್ಯಂತ ನಿರಂತರ ಸವಾಲುಗಳಲ್ಲಿ ಒಂದು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು (loading states) ನಿರ್ವಹಿಸುವುದು. ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್‌ಗಾಗಿ ಡೇಟಾ ತರುವುದರಿಂದ ಹಿಡಿದು ಅಪ್ಲಿಕೇಶನ್‌ನ ಹೊಸ ವಿಭಾಗವನ್ನು ಲೋಡ್ ಮಾಡುವವರೆಗೆ, ಕಾಯುವ ಕ್ಷಣಗಳು ನಿರ್ಣಾಯಕವಾಗಿವೆ. ಐತಿಹಾಸಿಕವಾಗಿ, ಇದು isLoading, isFetching, ಮತ್ತು hasError ನಂತಹ ಬೂಲಿಯನ್ ಫ್ಲ್ಯಾಗ್‌ಗಳ ಗೋಜಲಿನ ಜಾಲವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಇದು ನಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾದ್ಯಂತ ಹರಡಿಕೊಂಡಿರುತ್ತದೆ. ಈ ಇಂಪರೇಟಿವ್ ವಿಧಾನವು ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ಗೊಂದಲಗೊಳಿಸುತ್ತದೆ, ತರ್ಕವನ್ನು ಸಂಕೀರ್ಣಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ರೇಸ್ ಕಂಡೀಶನ್‌ಗಳಂತಹ ದೋಷಗಳಿಗೆ ಆಗಾಗ್ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಇಲ್ಲಿದೆ ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಪರಿಚಯ. ಆರಂಭದಲ್ಲಿ React.lazy() ಜೊತೆಗೆ ಕೋಡ್-ಸ್ಪ್ಲಿಟಿಂಗ್‌ಗಾಗಿ ಪರಿಚಯಿಸಲಾದ ಇದರ ಸಾಮರ್ಥ್ಯಗಳು ರಿಯಾಕ್ಟ್ 18 ರೊಂದಿಗೆ ನಾಟಕೀಯವಾಗಿ ವಿಸ್ತರಿಸಲ್ಪಟ್ಟಿವೆ. ಇದು ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು, ವಿಶೇಷವಾಗಿ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ನಿಭಾಯಿಸಲು ಪ್ರಬಲ, ಪ್ರಥಮ-ದರ್ಜೆಯ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯಾಗಿ ಮಾರ್ಪಟ್ಟಿದೆ. ಸಸ್ಪೆನ್ಸ್ ನಮಗೆ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಡಿಕ್ಲರೇಟಿವ್ ರೀತಿಯಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದು ನಾವು ನಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಬಗ್ಗೆ ಬರೆಯುವ ಮತ್ತು ತರ್ಕಿಸುವ ರೀತಿಯನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. "ನಾನು ಲೋಡ್ ಆಗುತ್ತಿದ್ದೇನೆಯೇ?" ಎಂದು ಕೇಳುವ ಬದಲು, ನಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸರಳವಾಗಿ, "ನನಗೆ ರೆಂಡರ್ ಮಾಡಲು ಈ ಡೇಟಾ ಬೇಕು. ನಾನು ಕಾಯುತ್ತಿರುವಾಗ, ದಯವಿಟ್ಟು ಈ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ತೋರಿಸಿ" ಎಂದು ಹೇಳಬಹುದು.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್‌ನ ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನಗಳಿಂದ ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್‌ನ ಡಿಕ್ಲರೇಟಿವ್ ಮಾದರಿಗೆ ಒಂದು ಪ್ರಯಾಣದಲ್ಲಿ ಕರೆದೊಯ್ಯುತ್ತದೆ. ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳು ಯಾವುವು, ಅವು ಕೋಡ್-ಸ್ಪ್ಲಿಟಿಂಗ್ ಮತ್ತು ಡೇಟಾ ಫೆಚಿಂಗ್ ಎರಡಕ್ಕೂ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರನ್ನು ನಿರಾಶೆಗೊಳಿಸುವ ಬದಲು ಸಂತೋಷಪಡಿಸುವ ಸಂಕೀರ್ಣ ಲೋಡಿಂಗ್ UIಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸುವುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.

ಹಳೆಯ ವಿಧಾನ: ಹಸ್ತಚಾಲಿತ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳ ಜಗಳ

ಸಸ್ಪೆನ್ಸ್‌ನ ಸೊಬಗನ್ನು ನಾವು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಶಂಸಿಸುವ ಮೊದಲು, ಅದು ಪರಿಹರಿಸುವ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. useEffect ಮತ್ತು useState ಹೂಕ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡೇಟಾ ತರುವ ಒಂದು ವಿಶಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನೋಡೋಣ.

ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ತಂದು ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Reset state for new userId
    setIsLoading(true);
    setUser(null);
    setError(null);

    const fetchUser = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUser();
  }, [userId]); // Re-fetch when userId changes

  if (isLoading) {
    return <p>Loading profile...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

ಈ ಮಾದರಿಯು ಕಾರ್ಯಸಾಧ್ಯವಾಗಿದೆ, ಆದರೆ ಇದರಲ್ಲಿ ಹಲವಾರು ನ್ಯೂನತೆಗಳಿವೆ:

• ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್: ಪ್ರತಿಯೊಂದು ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗೆ ನಮಗೆ ಕನಿಷ್ಠ ಮೂರು ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್‌ಗಳು (data, isLoading, error) ಬೇಕಾಗುತ್ತವೆ. ಇದು ಒಂದು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸರಿಯಾಗಿ ಅಳೆಯಲಾಗುವುದಿಲ್ಲ.
• ಚದುರಿದ ತರ್ಕ: ರೆಂಡರಿಂಗ್ ತರ್ಕವು ಷರತ್ತುಬದ್ಧ ತಪಾಸಣೆಗಳೊಂದಿಗೆ (if (isLoading), if (error)) ವಿಭಜಿಸಲ್ಪಟ್ಟಿದೆ. ಪ್ರಾಥಮಿಕ "ಹ್ಯಾಪಿ ಪಾತ್" ರೆಂಡರ್ ತರ್ಕವು ಅತ್ಯಂತ ಕೆಳಗೆ ತಳ್ಳಲ್ಪಟ್ಟಿದೆ, ಇದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಓದಲು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.
• ರೇಸ್ ಕಂಡೀಶನ್‌ಗಳು: useEffect ಹೂಕ್‌ಗೆ ಎಚ್ಚರಿಕೆಯ ಡಿಪೆಂಡೆನ್ಸಿ ನಿರ್ವಹಣೆ ಅಗತ್ಯ. ಸರಿಯಾದ ಕ್ಲೀನಪ್ ಇಲ್ಲದೆ, userId ಪ್ರಾಪ್ ವೇಗವಾಗಿ ಬದಲಾದರೆ, ನಿಧಾನಗತಿಯ ಪ್ರತಿಕ್ರಿಯೆಯಿಂದ ವೇಗದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ತಿದ್ದಿ ಬರೆಯಬಹುದು. ನಮ್ಮ ಉದಾಹರಣೆ ಸರಳವಾಗಿದ್ದರೂ, ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳು ಸುಲಭವಾಗಿ ಸೂಕ್ಷ್ಮ ದೋಷಗಳನ್ನು ಪರಿಚಯಿಸಬಹುದು.
• ಜಲಪಾತದ ಫೆಚ್‌ಗಳು (Waterfall Fetches): ಒಂದು ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಡೇಟಾ ತರಬೇಕಾದರೆ, ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಆಗಿ ಮುಗಿಯುವವರೆಗೆ ಅದು ರೆಂಡರಿಂಗ್ (ಮತ್ತು ಹೀಗಾಗಿ ಫೆಚಿಂಗ್) ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಇದು ಅಸಮರ್ಥ ಡೇಟಾ-ಲೋಡಿಂಗ್ ಜಲಪಾತಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಪರಿಚಯ: ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆ

ಸಸ್ಪೆನ್ಸ್ ಈ ಮಾದರಿಯನ್ನು ತಲೆಕೆಳಗಾಗಿ ಮಾಡುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಆಂತರಿಕವಾಗಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವ ಬದಲು, ಅದು ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಯ ಮೇಲಿನ ತನ್ನ ಅವಲಂಬನೆಯನ್ನು ನೇರವಾಗಿ ರಿಯಾಕ್ಟ್‌ಗೆ ಸಂವಹಿಸುತ್ತದೆ. ಅದಕ್ಕೆ ಬೇಕಾದ ಡೇಟಾ ಇನ್ನೂ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ, ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು "ಸಸ್ಪೆಂಡ್" ಮಾಡುತ್ತದೆ.

ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಸಸ್ಪೆಂಡ್ ಮಾಡಿದಾಗ, ರಿಯಾಕ್ಟ್ ಹತ್ತಿರದ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಯನ್ನು ಹುಡುಕಲು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯನ್ನು ಮೇಲಕ್ಕೆ ಹೋಗುತ್ತದೆ. ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿ ಎನ್ನುವುದು ನಿಮ್ಮ ಟ್ರೀಯಲ್ಲಿ <Suspense> ಬಳಸಿ ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ. ಈ ಬೌಂಡರಿಯು ನಂತರ ಅದರೊಳಗಿನ ಎಲ್ಲಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಡೇಟಾ ಅವಲಂಬನೆಗಳನ್ನು ಪರಿಹರಿಸುವವರೆಗೆ ಒಂದು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು (ಒಂದು ಸ್ಪಿನ್ನರ್ ಅಥವಾ ಸ್ಕೆಲಿಟನ್ ಲೋಡರ್‌ನಂತೆ) ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಮೂಲ ಕಲ್ಪನೆಯೆಂದರೆ, ಡೇಟಾ ಅವಲಂಬನೆಯನ್ನು ಅದಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸಹ-ಸ್ಥಳೀಕರಿಸುವುದು, ಹಾಗೆಯೇ ಲೋಡಿಂಗ್ UI ಅನ್ನು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸುವುದು. ಇದು ಕಾಂಪೊನೆಂಟ್ ತರ್ಕವನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ಲೋಡಿಂಗ್ ಅನುಭವದ ಮೇಲೆ ನಿಮಗೆ ಪ್ರಬಲ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.

ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಹೇಗೆ "ಸಸ್ಪೆಂಡ್" ಮಾಡುತ್ತದೆ?

ಸಸ್ಪೆನ್ಸ್ ಹಿಂದಿನ ಮ್ಯಾಜಿಕ್ ಮೊದಲಿಗೆ ಅಸಾಮಾನ್ಯವೆಂದು ತೋರುವ ಒಂದು ಮಾದರಿಯಲ್ಲಿದೆ: ಒಂದು ಪ್ರಾಮಿಸ್ ಅನ್ನು ಥ್ರೋ ಮಾಡುವುದು (throwing a Promise). ಸಸ್ಪೆನ್ಸ್-ಸಕ್ರಿಯಗೊಳಿಸಿದ ಡೇಟಾ ಮೂಲವು ಈ ರೀತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:

1. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಡೇಟಾವನ್ನು ಕೇಳಿದಾಗ, ಡೇಟಾ ಮೂಲವು ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
2. ಡೇಟಾ ಲಭ್ಯವಿದ್ದರೆ, ಅದು ಅದನ್ನು ಸಿಂಕ್ರೊನಸ್ ಆಗಿ ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
3. ಡೇಟಾ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ (ಅಂದರೆ, ಅದನ್ನು ಪ್ರಸ್ತುತ ಫೆಚ್ ಮಾಡಲಾಗುತ್ತಿದ್ದರೆ), ಡೇಟಾ ಮೂಲವು ನಡೆಯುತ್ತಿರುವ ಫೆಚ್ ವಿನಂತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಥ್ರೋ ಮಾಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಈ ಥ್ರೋ ಮಾಡಿದ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಹಿಡಿಯುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಆ್ಯಪ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಇದು ಅದನ್ನು ಒಂದು ಸಂಕೇತವಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳುತ್ತದೆ: "ಈ ಕಾಂಪೊನೆಂಟ್ ಇನ್ನೂ ರೆಂಡರ್ ಮಾಡಲು ಸಿದ್ಧವಾಗಿಲ್ಲ. ಇದನ್ನು ವಿರಾಮಗೊಳಿಸಿ, ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ ತೋರಿಸಲು ಅದರ ಮೇಲೆ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಯನ್ನು ನೋಡಿ." ಪ್ರಾಮಿಸ್ ರಿಸಾಲ್ವ್ ಆದ ನಂತರ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ಪ್ರಯತ್ನಿಸಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಅದು ಈಗ ತನ್ನ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ ಮತ್ತು ಯಶಸ್ವಿಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

<Suspense> ಬೌಂಡರಿ: ನಿಮ್ಮ ಲೋಡಿಂಗ್ UI ಡಿಕ್ಲರೇಟರ್

<Suspense> ಕಾಂಪೊನೆಂಟ್ ಈ ಮಾದರಿಯ ಹೃದಯವಾಗಿದೆ. ಇದನ್ನು ಬಳಸುವುದು ನಂಬಲಾಗದಷ್ಟು ಸರಳವಾಗಿದೆ, ಇದು ಒಂದೇ, ಅಗತ್ಯವಾದ ಪ್ರಾಪ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: fallback.

import { Suspense } from 'react';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Suspense fallback={<p>Loading content...</p>}>
        <SomeComponentThatFetchesData />
      </Suspense>
    </div>
  );
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, SomeComponentThatFetchesData ಸಸ್ಪೆಂಡ್ ಮಾಡಿದರೆ, ಡೇಟಾ ಸಿದ್ಧವಾಗುವವರೆಗೆ ಬಳಕೆದಾರರು "Loading content..." ಸಂದೇಶವನ್ನು ನೋಡುತ್ತಾರೆ. ಫಾಲ್‌ಬ್ಯಾಕ್ ಯಾವುದೇ ಮಾನ್ಯ ರಿಯಾಕ್ಟ್ ನೋಡ್ ಆಗಿರಬಹುದು, ಒಂದು ಸರಳ ಸ್ಟ್ರಿಂಗ್‌ನಿಂದ ಸಂಕೀರ್ಣ ಸ್ಕೆಲಿಟನ್ ಕಾಂಪೊನೆಂಟ್‌ವರೆಗೆ.

ಕ್ಲಾಸಿಕ್ ಬಳಕೆಯ ಪ್ರಕರಣ: React.lazy() ಜೊತೆಗೆ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್

ಸಸ್ಪೆನ್ಸ್‌ನ ಅತ್ಯಂತ ಸ್ಥಾಪಿತ ಬಳಕೆಯು ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಆಗಿದೆ. ಇದು ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡ್ ಮಾಡುವುದನ್ನು ಅದು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವವರೆಗೆ ಮುಂದೂಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

import React, { Suspense, lazy } from 'react';

// This component's code won't be in the initial bundle.
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h2>Some content that loads immediately</h2>
      <Suspense fallback={<div>Loading component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

ಇಲ್ಲಿ, ರಿಯಾಕ್ಟ್ HeavyComponent ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮೊದಲ ಬಾರಿಗೆ ರೆಂಡರ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಮಾತ್ರ ಫೆಚ್ ಮಾಡುತ್ತದೆ. ಅದನ್ನು ಫೆಚ್ ಮಾಡಿ ಪಾರ್ಸ್ ಮಾಡುವಾಗ, ಸಸ್ಪೆನ್ಸ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಇದು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಒಂದು ಪ್ರಬಲ ತಂತ್ರವಾಗಿದೆ.

ಆಧುನಿಕ ಗಡಿ: ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಡೇಟಾ ಫೆಚಿಂಗ್

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸಿದರೂ, ಅದು ನಿರ್ದಿಷ್ಟ ಡೇಟಾ-ಫೆಚಿಂಗ್ ಕ್ಲೈಂಟ್ ಅನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ. ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ ಸಸ್ಪೆನ್ಸ್ ಬಳಸಲು, ನಿಮಗೆ ಅದರೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಡೇಟಾ ಮೂಲ ಬೇಕು (ಅಂದರೆ, ಡೇಟಾ ಪೆಂಡಿಂಗ್ ಆಗಿರುವಾಗ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಥ್ರೋ ಮಾಡುವ ಒಂದು).

ರಿಲೇ (Relay) ಮತ್ತು ನೆಕ್ಸ್ಟ್.ಜೆಎಸ್ (Next.js) ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಸಸ್ಪೆನ್ಸ್‌ಗೆ ಅಂತರ್ನಿರ್ಮಿತ, ಪ್ರಥಮ-ದರ್ಜೆಯ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. ಟ್ಯಾನ್‌ಸ್ಟಾಕ್ ಕ್ವೆರಿ (ಹಿಂದೆ ರಿಯಾಕ್ಟ್ ಕ್ವೆರಿ) ಮತ್ತು SWR ನಂತಹ ಜನಪ್ರಿಯ ಡೇಟಾ-ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳು ಸಹ ಅದಕ್ಕೆ ಪ್ರಾಯೋಗಿಕ ಅಥವಾ ಪೂರ್ಣ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತವೆ.

ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, fetch API ಯ ಸುತ್ತ ಒಂದು ಅತ್ಯಂತ ಸರಳ, ಪರಿಕಲ್ಪನಾತ್ಮಕ ವ್ರ್ಯಾಪರ್ ಅನ್ನು ರಚಿಸೋಣ, ಅದನ್ನು ಸಸ್ಪೆನ್ಸ್-ಹೊಂದಾಣಿಕೆಯಾಗುವಂತೆ ಮಾಡಲು. ಗಮನಿಸಿ: ಇದು ಶೈಕ್ಷಣಿಕ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಒಂದು ಸರಳೀಕೃತ ಉದಾಹರಣೆಯಾಗಿದೆ ಮತ್ತು ಉತ್ಪಾದನೆಗೆ ಸಿದ್ಧವಾಗಿಲ್ಲ. ಇದು ಸರಿಯಾದ ಕ್ಯಾಶಿಂಗ್ ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆಯ ಜಟಿಲತೆಗಳನ್ನು ಹೊಂದಿಲ್ಲ.

// data-fetcher.js
// A simple cache to store results
const cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    cache.set(url, { status: 'pending', promise: fetchAndCache(url) });
  }

  const record = cache.get(url);

  if (record.status === 'pending') {
    throw record.promise; // This is the magic!
  }
  if (record.status === 'error') {
    throw record.error;
  }
  if (record.status === 'success') {
    return record.data;
  }
}

async function fetchAndCache(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Fetch failed with status ${response.status}`);
    }
    const data = await response.json();
    cache.set(url, { status: 'success', data });
  } catch (e) {
    cache.set(url, { status: 'error', error: e });
  }
}

ಈ ವ್ರ್ಯಾಪರ್ ಪ್ರತಿ URL ಗೆ ಒಂದು ಸರಳ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. fetchData ಅನ್ನು ಕರೆದಾಗ, ಅದು ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಅದು ಪೆಂಡಿಂಗ್ ಆಗಿದ್ದರೆ, ಅದು ಪ್ರಾಮಿಸ್ ಅನ್ನು ಥ್ರೋ ಮಾಡುತ್ತದೆ. ಅದು ಯಶಸ್ವಿಯಾದರೆ, ಅದು ಡೇಟಾವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಈಗ, ನಮ್ಮ UserProfile ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಇದನ್ನು ಬಳಸಿ ಪುನಃ ಬರೆಯೋಣ.

// UserProfile.js
import React, { Suspense } from 'react';
import { fetchData } from './data-fetcher';

// The component that actually uses the data
function ProfileDetails({ userId }) {
  // Try to read the data. If it's not ready, this will suspend.
  const user = fetchData(`https://api.example.com/users/${userId}`);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// The parent component that defines the loading state UI
export function UserProfile({ userId }) {
  return (
    <Suspense fallback={<p>Loading profile...</p>}>
      <ProfileDetails userId={userId} />
    </Suspense>
  );
}

ವ್ಯತ್ಯಾಸವನ್ನು ನೋಡಿ! ProfileDetails ಕಾಂಪೊನೆಂಟ್ ಸ್ವಚ್ಛವಾಗಿದೆ ಮತ್ತು ಕೇವಲ ಡೇಟಾವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ. ಇದರಲ್ಲಿ isLoading ಅಥವಾ error ಸ್ಥಿತಿಗಳಿಲ್ಲ. ಇದು ತನಗೆ ಬೇಕಾದ ಡೇಟಾವನ್ನು ಸರಳವಾಗಿ ವಿನಂತಿಸುತ್ತದೆ. ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ತೋರಿಸುವ ಜವಾಬ್ದಾರಿಯನ್ನು ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್, UserProfile ಗೆ ವರ್ಗಾಯಿಸಲಾಗಿದೆ, ಅದು ಕಾಯುತ್ತಿರುವಾಗ ಏನು ತೋರಿಸಬೇಕೆಂದು ಡಿಕ್ಲರೇಟಿವ್ ಆಗಿ ಹೇಳುತ್ತದೆ.

ಸಂಕೀರ್ಣ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

ನೀವು ಬಹು ಅಸಿಂಕ್ರೊನಸ್ ಅವಲಂಬನೆಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ UIಗಳನ್ನು ನಿರ್ಮಿಸಿದಾಗ ಸಸ್ಪೆನ್ಸ್‌ನ ನಿಜವಾದ ಶಕ್ತಿ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ.

ಹಂತಹಂತವಾದ UI ಗಾಗಿ ನೆಸ್ಟೆಡ್ ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳು

ನೀವು ಹೆಚ್ಚು ಸಂಸ್ಕರಿಸಿದ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ರಚಿಸಲು ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದು. ಒಂದು ಸೈಡ್‌ಬಾರ್, ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ, ಮತ್ತು ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆಗಳ ಪಟ್ಟಿಯನ್ನು ಹೊಂದಿರುವ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಪುಟವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಇವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದಕ್ಕೂ ತನ್ನದೇ ಆದ ಡೇಟಾ ಫೆಚ್ ಬೇಕಾಗಬಹುದು.

function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>
      <div className="layout">
        <Suspense fallback={<p>Loading navigation...</p>}>
          <Sidebar />
        </Suspense>

        <main>
          <Suspense fallback={<ProfileSkeleton />}>
            <MainContent />
          </Suspense>

          <Suspense fallback={<ActivityFeedSkeleton />}>
            <ActivityFeed />
          </Suspense>
        </main>
      </div>
    </div>
  );
}

ಈ ರಚನೆಯೊಂದಿಗೆ:

• ಮುಖ್ಯ ವಿಷಯವು ಇನ್ನೂ ಲೋಡ್ ಆಗುತ್ತಿದ್ದರೂ, Sidebar ತನ್ನ ಡೇಟಾ ಸಿದ್ಧವಾದ ತಕ್ಷಣ ಕಾಣಿಸಿಕೊಳ್ಳಬಹುದು.
• MainContent ಮತ್ತು ActivityFeed ಸ್ವತಂತ್ರವಾಗಿ ಲೋಡ್ ಆಗಬಹುದು. ಬಳಕೆದಾರರು ಪ್ರತಿ ವಿಭಾಗಕ್ಕೆ ವಿವರವಾದ ಸ್ಕೆಲಿಟನ್ ಲೋಡರ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ, ಇದು ಒಂದೇ, ಪುಟ-ವ್ಯಾಪಿ ಸ್ಪಿನ್ನರ್‌ಗಿಂತ ಉತ್ತಮ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಇದು ಬಳಕೆದಾರರಿಗೆ ಉಪಯುಕ್ತ ವಿಷಯವನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ ತೋರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಾಟಕೀಯವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.

UI "ಪಾಪ್‌ಕಾರ್ನಿಂಗ್" ಅನ್ನು ತಪ್ಪಿಸುವುದು

ಕೆಲವೊಮ್ಮೆ, ಹಂತಹಂತವಾದ ವಿಧಾನವು ಒಂದು ಅಹಿತಕರ ಪರಿಣಾಮಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು, ಅಲ್ಲಿ ಅನೇಕ ಸ್ಪಿನ್ನರ್‌ಗಳು ತ್ವರಿತ ಅನುಕ್ರಮದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಕಣ್ಮರೆಯಾಗುತ್ತವೆ, ಈ ಪರಿಣಾಮವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ "ಪಾಪ್‌ಕಾರ್ನಿಂಗ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದನ್ನು ಪರಿಹರಿಸಲು, ನೀವು ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಯನ್ನು ಟ್ರೀಯಲ್ಲಿ ಮೇಲಕ್ಕೆ ಸರಿಸಬಹುದು.

function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<DashboardSkeleton />}>
        <div className="layout">
          <Sidebar />
          <main>
            <MainContent />
            <ActivityFeed />
          </main>
        </div>
      </Suspense>
    </div>
  );
}

ಈ ಆವೃತ್ತಿಯಲ್ಲಿ, ಎಲ್ಲಾ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು (Sidebar, MainContent, ActivityFeed) ತಮ್ಮ ಡೇಟಾವನ್ನು ಸಿದ್ಧಪಡಿಸುವವರೆಗೆ ಒಂದೇ DashboardSkeleton ಅನ್ನು ತೋರಿಸಲಾಗುತ್ತದೆ. ನಂತರ ಸಂಪೂರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಒಂದೇ ಬಾರಿಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ನೆಸ್ಟೆಡ್ ಬೌಂಡರಿಗಳು ಮತ್ತು ಒಂದೇ ಉನ್ನತ-ಮಟ್ಟದ ಬೌಂಡರಿಯ ನಡುವಿನ ಆಯ್ಕೆಯು ಒಂದು UX ವಿನ್ಯಾಸದ ನಿರ್ಧಾರವಾಗಿದ್ದು, ಸಸ್ಪೆನ್ಸ್ ಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅತ್ಯಲ್ಪವಾಗಿಸುತ್ತದೆ.

ಎರರ್ ಬೌಂಡರಿಗಳೊಂದಿಗೆ ದೋಷ ನಿರ್ವಹಣೆ

ಸಸ್ಪೆನ್ಸ್ ಪ್ರಾಮಿಸ್‌ನ ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ, ಆದರೆ ರಿಜೆಕ್ಟೆಡ್ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಏನು? ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಥ್ರೋ ಮಾಡಿದ ಪ್ರಾಮಿಸ್ ರಿಜೆಕ್ಟ್ ಆದರೆ (ಉದಾಹರಣೆಗೆ, ನೆಟ್‌ವರ್ಕ್ ದೋಷ), ಅದನ್ನು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಯಾವುದೇ ಇತರ ರೆಂಡರಿಂಗ್ ದೋಷದಂತೆ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

ಇದಕ್ಕೆ ಪರಿಹಾರವೆಂದರೆ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು (Error Boundaries) ಬಳಸುವುದು. ಎರರ್ ಬೌಂಡರಿ ಎನ್ನುವುದು ಒಂದು ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದ್ದು, ಅದು componentDidCatch() ಎಂಬ ವಿಶೇಷ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್ ಅಥವಾ getDerivedStateFromError() ಎಂಬ ಸ್ಟ್ಯಾಟಿಕ್ ಮೆಥಡ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ತನ್ನ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಒಂದು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಇಲ್ಲಿದೆ ಒಂದು ಸರಳ ಎರರ್ ಬೌಂಡರಿ ಕಾಂಪೊನೆಂಟ್:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong. Please try again.</h1>;
    }

    return this.props.children; 
  }
}

ನಂತರ ನೀವು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ ಒಂದು ದೃಢವಾದ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಬಹುದು, ಅದು ಎಲ್ಲಾ ಮೂರು ಸ್ಥಿತಿಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ: ಪೆಂಡಿಂಗ್, ಸಕ್ಸಸ್, ಮತ್ತು ಎರರ್.

import { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';
import { UserProfile } from './UserProfile';

function App() {
  return (
    <div>
      <h2>User Information</h2>
      <ErrorBoundary>
        <Suspense fallback={<p>Loading...</p>}>
          <UserProfile userId={123} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

ಈ ಮಾದರಿಯೊಂದಿಗೆ, UserProfile ಒಳಗಿನ ಡೇಟಾ ಫೆಚ್ ಯಶಸ್ವಿಯಾದರೆ, ಪ್ರೊಫೈಲ್ ತೋರಿಸಲಾಗುತ್ತದೆ. ಅದು ಪೆಂಡಿಂಗ್ ಆಗಿದ್ದರೆ, ಸಸ್ಪೆನ್ಸ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ತೋರಿಸಲಾಗುತ್ತದೆ. ಅದು ವಿಫಲವಾದರೆ, ಎರರ್ ಬೌಂಡರಿಯ ಫಾಲ್‌ಬ್ಯಾಕ್ ತೋರಿಸಲಾಗುತ್ತದೆ. ತರ್ಕವು ಡಿಕ್ಲರೇಟಿವ್, ಸಂಯೋಜನಾತ್ಮಕ, ಮತ್ತು ತರ್ಕಿಸಲು ಸುಲಭವಾಗಿದೆ.

ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು: ತಡೆಯಿಲ್ಲದ UI ಅಪ್‌ಡೇಟ್‌ಗಳ ಕೀಲಿ

ಈ ಒಗಟಿಗೆ ಒಂದು ಅಂತಿಮ ತುಣುಕು ಇದೆ. ಒಂದು ಹೊಸ ಡೇಟಾ ಫೆಚ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಬಳಕೆದಾರರ ಸಂವಹನವನ್ನು ಪರಿಗಣಿಸಿ, ಉದಾಹರಣೆಗೆ ಬೇರೆ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ವೀಕ್ಷಿಸಲು "Next" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು. ಮೇಲಿನ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ userId ಪ್ರಾಪ್ ಬದಲಾದ ಕ್ಷಣ, UserProfile ಕಾಂಪೊನೆಂಟ್ ಮತ್ತೆ ಸಸ್ಪೆಂಡ್ ಆಗುತ್ತದೆ. ಇದರರ್ಥ ಪ್ರಸ್ತುತ ಗೋಚರಿಸುವ ಪ್ರೊಫೈಲ್ ಕಣ್ಮರೆಯಾಗುತ್ತದೆ ಮತ್ತು ಲೋಡಿಂಗ್ ಫಾಲ್‌ಬ್ಯಾಕ್‌ನಿಂದ ಬದಲಾಯಿಸಲ್ಪಡುತ್ತದೆ. ಇದು ಹಠಾತ್ ಮತ್ತು ಅಡ್ಡಿಪಡಿಸುವಂತೆ ಅನಿಸಬಹುದು.

ಇಲ್ಲಿಯೇ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು (transitions) ಬರುತ್ತವೆ. ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ರಿಯಾಕ್ಟ್ 18 ರಲ್ಲಿನ ಒಂದು ಹೊಸ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ಕೆಲವು ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ತುರ್ತು ಅಲ್ಲದವು ಎಂದು ಗುರುತಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಒಂದು ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಟ್ರಾನ್ಸಿಶನ್‌ನಲ್ಲಿ ಸುತ್ತಿದಾಗ, ರಿಯಾಕ್ಟ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಹೊಸ ವಿಷಯವನ್ನು ಸಿದ್ಧಪಡಿಸುವಾಗ ಹಳೆಯ UI (ಹಳೆಯ ವಿಷಯ) ಅನ್ನು ಪ್ರದರ್ಶಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ. ಹೊಸ ವಿಷಯವು ಪ್ರದರ್ಶನಕ್ಕೆ ಸಿದ್ಧವಾದ ನಂತರವೇ ಅದು UI ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಕಮಿಟ್ ಮಾಡುತ್ತದೆ.

ಇದಕ್ಕಾಗಿ ಪ್ರಾಥಮಿಕ API useTransition ಹೂಕ್ ಆಗಿದೆ.

import React, { useState, useTransition, Suspense } from 'react';
import { UserProfile } from './UserProfile';

function ProfileSwitcher() {
  const [userId, setUserId] = useState(1);
  const [isPending, startTransition] = useTransition();

  const handleNextClick = () => {
    startTransition(() => {
      setUserId(id => id + 1);
    });
  };

  return (
    <div>
      <button onClick={handleNextClick} disabled={isPending}>
        Next User
      </button>

      {isPending && <span> Loading new profile...</span>}

      <ErrorBoundary>
        <Suspense fallback={<p>Loading initial profile...</p>}>
          <UserProfile userId={userId} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

ಈಗ ಏನಾಗುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

1. userId: 1 ಗಾಗಿ ಆರಂಭಿಕ ಪ್ರೊಫೈಲ್ ಲೋಡ್ ಆಗುತ್ತದೆ, ಸಸ್ಪೆನ್ಸ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
2. ಬಳಕೆದಾರರು "Next User" ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ.
3. setUserId ಕರೆಯು startTransition ನಲ್ಲಿ ಸುತ್ತಲ್ಪಟ್ಟಿದೆ.
4. ರಿಯಾಕ್ಟ್ ಹೊಸ userId 2 ರೊಂದಿಗೆ UserProfile ಅನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಇದು ಅದನ್ನು ಸಸ್ಪೆಂಡ್ ಮಾಡಲು ಕಾರಣವಾಗುತ್ತದೆ.
5. ನಿರ್ಣಾಯಕವಾಗಿ, ಸಸ್ಪೆನ್ಸ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ತೋರಿಸುವ ಬದಲು, ರಿಯಾಕ್ಟ್ ಹಳೆಯ UI ಅನ್ನು (ಬಳಕೆದಾರ 1 ರ ಪ್ರೊಫೈಲ್) ಪರದೆಯ ಮೇಲೆ ಇಡುತ್ತದೆ.
6. useTransition ನಿಂದ ಹಿಂತಿರುಗಿಸಲಾದ isPending ಬೂಲಿಯನ್ true ಆಗುತ್ತದೆ, ಇದು ಹಳೆಯ ವಿಷಯವನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡದೆ ಸೂಕ್ಷ್ಮ, ಇನ್‌ಲೈನ್ ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ತೋರಿಸಲು ನಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
7. ಬಳಕೆದಾರ 2 ರ ಡೇಟಾ ಫೆಚ್ ಆಗಿ UserProfile ಯಶಸ್ವಿಯಾಗಿ ರೆಂಡರ್ ಮಾಡಲು ಸಾಧ್ಯವಾದ ನಂತರ, ರಿಯಾಕ್ಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಕಮಿಟ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಹೊಸ ಪ್ರೊಫೈಲ್ ಸುಗಮವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ನಿಯಂತ್ರಣದ ಅಂತಿಮ ಪದರವನ್ನು ಒದಗಿಸುತ್ತವೆ, ಎಂದಿಗೂ ಅಹಿತಕರವೆನಿಸದ ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಲೋಡಿಂಗ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

• ಬೌಂಡರಿಗಳನ್ನು ಆಯಕಟ್ಟಿನ ಸ್ಥಳದಲ್ಲಿ ಇರಿಸಿ: ಪ್ರತಿಯೊಂದು ಸಣ್ಣ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸಸ್ಪೆನ್ಸ್ ಬೌಂಡರಿಯಲ್ಲಿ ಸುತ್ತಬೇಡಿ. ಅವುಗಳನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ತಾರ್ಕಿಕ ಬಿಂದುಗಳಲ್ಲಿ ಇರಿಸಿ, ಅಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯು ಬಳಕೆದಾರರಿಗೆ ಅರ್ಥಪೂರ್ಣವಾಗಿರುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಒಂದು ಪುಟ, ಒಂದು ದೊಡ್ಡ ಫಲಕ, ಅಥವಾ ಒಂದು ಪ್ರಮುಖ ವಿಜೆಟ್.
• ಅರ್ಥಪೂರ್ಣ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ: ಜೆನೆರಿಕ್ ಸ್ಪಿನ್ನರ್‌ಗಳು ಸುಲಭ, ಆದರೆ ಲೋಡ್ ಆಗುತ್ತಿರುವ ವಿಷಯದ ಆಕಾರವನ್ನು ಅನುಕರಿಸುವ ಸ್ಕೆಲಿಟನ್ ಲೋಡರ್‌ಗಳು ಹೆಚ್ಚು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಅವು ಲೇಔಟ್ ಶಿಫ್ಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತವೆ ಮತ್ತು ಯಾವ ವಿಷಯವು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಬಳಕೆದಾರರು ನಿರೀಕ್ಷಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು (Accessibility) ಪರಿಗಣಿಸಿ: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ತೋರಿಸುವಾಗ, ಅವು ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ವಿಷಯವು ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿದೆ ಎಂದು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸಲು ವಿಷಯ ಕಂಟೇನರ್‌ನಲ್ಲಿ aria-busy="true" ನಂತಹ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ.
• ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ: ಸಸ್ಪೆನ್ಸ್ ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ (RSC) ಒಂದು ಮೂಲಭೂತ ತಂತ್ರಜ್ಞಾನವಾಗಿದೆ. Next.js ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಸಸ್ಪೆನ್ಸ್ ಡೇಟಾ ಲಭ್ಯವಾದಂತೆ ಸರ್ವರ್‌ನಿಂದ HTML ಅನ್ನು ಸ್ಟ್ರೀಮ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ನಂಬಲಾಗದಷ್ಟು ವೇಗದ ಆರಂಭಿಕ ಪುಟ ಲೋಡ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಪರಿಸರ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸಿಕೊಳ್ಳಿ: ಆಧಾರವಾಗಿರುವ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾದರೂ, ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, TanStack Query, SWR, ಅಥವಾ Relay ನಂತಹ ಯುದ್ಧ-ಪರೀಕ್ಷಿತ ಲೈಬ್ರರಿಗಳ ಮೇಲೆ ಅವಲಂಬಿತರಾಗಿ. ಅವು ಕ್ಯಾಶಿಂಗ್, ಡಿಡ್ಯೂಪ್ಲಿಕೇಶನ್, ಮತ್ತು ಇತರ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತವೆ ಮತ್ತು ಸುಗಮ ಸಸ್ಪೆನ್ಸ್ ಏಕೀಕರಣವನ್ನು ಒದಗಿಸುತ್ತವೆ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಕೇವಲ ಒಂದು ಹೊಸ ವೈಶಿಷ್ಟ್ಯಕ್ಕಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ; ಇದು ನಾವು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಅಸಿಂಕ್ರೊನಿಸಿಟಿಯನ್ನು ಸಮೀಪಿಸುವ ರೀತಿಯಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ವಿಕಸನವಾಗಿದೆ. ಹಸ್ತಚಾಲಿತ, ಇಂಪರೇಟಿವ್ ಲೋಡಿಂಗ್ ಫ್ಲ್ಯಾಗ್‌ಗಳಿಂದ ದೂರ ಸರಿದು ಡಿಕ್ಲರೇಟಿವ್ ಮಾದರಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಾವು ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ, ಮತ್ತು ಸಂಯೋಜಿಸಲು ಸುಲಭವಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬರೆಯಬಹುದು.

ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ <Suspense>, ವೈಫಲ್ಯ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ಎರರ್ ಬೌಂಡರಿಗಳು, ಮತ್ತು ಸುಗಮ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗಾಗಿ useTransition ಅನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಬಳಿ ಒಂದು ಸಂಪೂರ್ಣ ಮತ್ತು ಶಕ್ತಿಯುತ ಟೂಲ್‌ಕಿಟ್ ಇದೆ. ನೀವು ಸರಳ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್‌ಗಳಿಂದ ಸಂಕೀರ್ಣ, ಹಂತಹಂತವಾದ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನಾವರಣಗಳವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಕನಿಷ್ಠ, ಊಹಿಸಬಹುದಾದ ಕೋಡ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಸಂಯೋಜಿಸಲು ಪ್ರಾರಂಭಿಸಿದಂತೆ, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವುದಲ್ಲದೆ, ನಿಮ್ಮ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ತರ್ಕವನ್ನು ನಾಟಕೀಯವಾಗಿ ಸರಳಗೊಳಿಸುತ್ತದೆ ಎಂದು ನೀವು ಕಂಡುಕೊಳ್ಳುವಿರಿ, ಇದು ನಿಜವಾಗಿಯೂ ಮುಖ್ಯವಾದುದರ ಮೇಲೆ ಗಮನಹರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ: ಉತ್ತಮ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುವುದು.